<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
	 $("#serch").click(function(){
		 $("#info").empty();
		 $("#panel").show();
		  var sid=$("#sid").val();
	        $.ajax({
	        	type:'post',
	        	url:'${pageContext.request.contextPath}/serchshoplist',
	        	data:{'sid':sid},
	        	dataType:'json',
	        	success:function(data){
	        		var gid=data.gids;
	        		var  gids=gid.split(",");
	        		
	        		var gname=data.gnames;
	        		var gnames=gname.split(",");
	        		
	        		var gnumber=data.gnumbers;
	        		var gnumbers=gnumber.split(",");
	        	    
	        		
	        		var gprice=data.gprices;
	        		var gprices=gprice.split(",");
	        		
	        		$(gids).each(function(v,m){
	        			
	        			$("#info").append("<tr id='id"+v+"'><td><input disabled='disabled' name='gids'style='width:30px' readonly='readonly' type='text' value='"+m+"'/></td></tr>")
	        		   });
	        			$(gnames).each(function(v,m){
	            			$("#id"+v+"").append("<td><input disabled='disabled' name='gnames' style='width:110px'  readonly='readonly' type='text' value='"+m+"'/></td>")
	            		});
	        			$(gprices).each(function(v,m){
	            			$("#id"+v+"").append("<td><input disabled='disabled' name='gprices' style='width:60px' readonly='readonly' type='text' value='"+m+"'/></td>")
	            		});
	            		$(gnumbers).each(function(v,m){
	            			$("#id"+v+"").append("<td><input id='gnumbers' name='gnumbers' style='width:30px'  type='text' value='"+m+"'/></td>")
	        		   });
	            		
	        		$("#totalmoney").text(data.totalmoney+"元");
	        	}
	        	
	        })
	 })
	 
	 $("#commit").click(function(){
		  var  tuihuo =  $("#tuihuo").serializeArray();
		   var o ={};
		     $.each(tuihuo,function(index){
				  if(o[this['name']]){
				  o[this['name']] = o[this['name']] +","+this['value'];
				  }else{
				  o[this['name']] = this['value'];
				  }
				  });  
		    
		    var gnumbers=o.gnumbers;
		    if(gnumbers.indexOf("-")>=0){
		           alert("不能输入负数哟!")
		        }else{
		        	 $.ajax({
		 	        	type:'post',
		 	        	url:'${pageContext.request.contextPath}/updateorder',
		 	        	data:{'gnumbers':gnumbers},
		 	        	dataType:'json',
		 	        	success:function(data){
		 	        		$("#nowtotal").text(data.nowtotal+"元");
		 	        		$("#chajia").text(data.chajia+"元");
		 	        		$("#msg").text(data.msg);
		 	        		
		 	        	}
		 	        	
		 	        })
		        }
		  
	 })
 })
</script>
</head>
<body>
<div class="container-fluid">
<!-- 搜索框 -->
  <div class="row">
  <br>
      <div class="col-md-12" >
     
         <form class="form-inline" role="form">
			  <div class="form-group has-success has-feedback">
			    <input id="sid" name="sid" type="text" class="form-control" placeholder="请输入购物清单的编号" />
			    <span class="glyphicon glyphicon-search form-control-feedback "></span>
			  </div>
			 <button id="serch" type="button" class="btn btn-success">查询</button>
         </form>
      </div>
       <div class="col-md-3" >
       </div>
       <!-- 购物清单展示 -->
        <div class="col-md-6" >
       <div id="panel" class="panel panel-default" style="width:600px;margin-left:50px;height:420px; display: none;" >
		  <div class="panel-heading">
		    <h3 class="panel-title">购物清单详细</h3>
		  </div>
		  <div class="panel-body">
		<form id="tuihuo">
		   <table id="gouwuqingdan" class="table table-bordered table-condensed">
           <tr><td>商品编号</td><td>商品名称</td><td>商品单价(元)</td><td>购买数量</td></tr>
           <tbody id="info"></tbody>
           </table>
		  
		    原总金额:<label id="totalmoney"></label><br> 
		    现总金额:<label id="nowtotal"></label> <label id="msg"></label><br>
		    找补金额:<label id="chajia"></label>
		  <button  style="position: relative; left: 90px" id="commit" type="button" class="btn btn-success">重新生成清单</button>
		 </form>
		 </div>
       </div>
        </div>
        <div class="col-md-3" >
       </div>
  </div>
</div>
</body>
</html>